<template>
    <!-- 单独写改函数用于对每个菜单项进行递归 -->
    <div>
        <el-sub-menu v-if="item.children" :index="item.url">
            <!-- 给二级菜单拟定一个标题 -->
            <template #title>
                <el-icon>
                    <!-- 动态组件 -->
                    <component :is="item.icon" v-if="item.children?.length"></component>
                </el-icon>
                <span>{{ item.name }}</span>
            </template>
            <my-menu v-for="child in item.children" :key="child.url" :item="child"></my-menu>
        </el-sub-menu>
        <el-menu-item v-else :index="item.url" v-show="!(item.name == '订单详情')">
            <el-icon>
                <component :is="item.icon"></component>
            </el-icon>
            <span>{{item.name}}</span>
        </el-menu-item>
    </div>
</template>
<script lang="ts">
import { defineComponent,type PropType } from 'vue';
import {MenuItem as MenuItemType} from '@/types/user/menu';
// defineComponent用于定义一个组件
export default defineComponent({
    name:"MyMenu",
    props:{
        item:{
            // 定义一个对象类型，接收泛型sou type as PropType<type>
            type:Object as PropType<MenuItemType>,//对象类型
            required:true
        }
    }
})

</script>
<style scoped lang="less">
    .is-active{
        background-color: rgb(34,136,255);
        color:#fff !important;
        div{
            span{
                color: #fff;
            }
        }
    }
    // 鼠标滑过时
    .el-menu-item:hover{
        background-color: rgb(34,136,255);
        color:#fff !important;
    }
    // ::v-deep 可以使单条样式不受作用域影响
    ::v-deep.el-sub-menu__title:hover{
        background-color: rgb(34,136,255);
        color:#fff !important;
    }

</style>